<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top">
				<uni-forms-item label="用户昵称" name="nickName" required>
					<uni-easyinput v-model="form.nickName" placeholder="请输入用户昵称" />
				</uni-forms-item>
				<uni-forms-item label="归属部门" name="deptId" required>
					<xy-drawer-tree-select v-model="form.deptId" :data="deptSelectTree" value-name="id" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phonenumber" required>
					<uni-easyinput v-model="form.phonenumber" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email" required>
					<uni-easyinput v-model="form.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="用户名称" name="userName" required v-if="form.userId == null">
					<uni-easyinput v-model="form.userName" placeholder="请输入用户名称" />
				</uni-forms-item>
				<uni-forms-item label="用户密码" name="password" required v-if="form.userId == null">
					<uni-easyinput v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
						show-password />
				</uni-forms-item>
				<uni-forms-item label="用户性别" name="sex" required>
					<xy-checkbox v-model="form.sex" :data="sys_user_sex" />
				</uni-forms-item>
				<uni-forms-item label="岗位" name="postIds">
					<xy-select v-model="form.postIds" :data="postOptions" value-name="postId" label-name="postName" placement="top"
						placeholder="请输入用户岗位筛选" multiple clearable />
				</uni-forms-item>
				<uni-forms-item label="角色" name="roleIds">
					<xy-select v-model="form.roleIds" :data="roleOptions" value-name="roleId" label-name="roleName" placement="top"
						placeholder="请输入用户角色筛选" multiple clearable />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" :maxlength="-1" autoHeight v-model="form.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="submitForm()">确认</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="cancel()">取消</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		deptTreeSelect,
		getUser,
		addUser,
		updateUser,
	} from '@/pages_work/api/system/user'
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable,
		sys_user_sex
	} = proxy.useDict("sys_normal_disable", "sys_user_sex");

	/** 表单数据 */
	const form = ref({});
	/** 职务数据 */
	const postOptions = ref([]);
	/** 角色数据 */
	const roleOptions = ref([]);
	/** 表单检验规则 */
	const rules = ref(proxy.uniappRules({
		userName: [{
			required: true,
			errorMessage: "用户名称不能为空",
			trigger: "blur"
		}, {
			min: 2,
			max: 20,
			errorMessage: "用户名称长度必须介于 2 和 20 之间",
			trigger: "blur"
		}],
		nickName: [{
			required: true,
			errorMessage: "用户昵称不能为空",
			trigger: "blur"
		}],
		password: [{
			required: true,
			errorMessage: "用户密码不能为空",
			trigger: "blur"
		}, {
			min: 5,
			max: 20,
			errorMessage: "用户密码长度必须介于 5 和 20 之间",
			trigger: "blur"
		}, {
			pattern: /^[^<>"'|\\]+$/,
			errorMessage: "不能包含非法字符：< > \" ' \\\ |",
			trigger: "blur"
		}],
		email: [{
			type: "email",
			errorMessage: "请输入正确的邮箱地址",
			trigger: ["blur", "change"]
		}],
		phonenumber: [{
			pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
			errorMessage: "请输入正确的手机号码",
			trigger: "blur"
		}]
	}))
	/** 自定义组件支持的部门树结构 */
	const deptSelectTree = ref([]);

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.userId == undefined || params.userId == null) params.userId = '';
		getUserInfo(params.userId);
	})

	const getUserInfo = (userId) => {
		// console.log('开始请求用户数据！', userId);
		getUser(userId).then(res => {
			if (res.roleIds) res.data.roleIds = res.roleIds
			if (res.postIds) res.data.postIds = res.postIds
			if (res.data) form.value = res.data;
			postOptions.value = res.posts;
			roleOptions.value = res.roles;
		})
	}

	/** 查询部门树 */
	const getDeptTree = () => {
		deptTreeSelect().then(res => {
			deptSelectTree.value = res.data;
		})
	}

	/** 取消按钮 */
	const cancel = () => {
		uni.navigateBack()
	}

	/** 提交按钮 */
	const submitForm = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if (valid) {
				console.log(valid);
				if (form.value.userId != undefined) {
					updateUser(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						setTimeout(uni.navigateBack, 1000);
					});
				} else {
					addUser(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						setTimeout(uni.navigateBack, 1000);
					});
				}
			}
		});
	};
	getDeptTree();
	
	onUnload(() => {
		uni.$emit('update')
	})
	
</script>

<style lang="scss">
	@import "@/static/scss/work/form.scss";
</style>